<template>
  <view class="loading-state" :class="`loading-state--${type}`">
    <!-- 骨架屏加载 -->
    <template v-if="type === 'skeleton'">
      <view class="skeleton-container">
        <view v-for="n in skeletonCount" :key="n" class="skeleton-item">
          <view class="skeleton-avatar"></view>
          <view class="skeleton-content">
            <view class="skeleton-line skeleton-line--title"></view>
            <view class="skeleton-line skeleton-line--subtitle"></view>
            <view class="skeleton-line skeleton-line--text"></view>
          </view>
        </view>
      </view>
    </template>

    <!-- 加载中状态 -->
    <template v-else-if="type === 'loading'">
      <view class="loading-container">
        <view class="loading-spinner">
          <view class="spinner-dot" v-for="n in 3" :key="n"></view>
        </view>
        <text class="loading-text">{{ loadingText }}</text>
      </view>
    </template>

    <!-- 空状态 -->
    <template v-else-if="type === 'empty'">
      <view class="empty-container">
        <view class="empty-icon">
          <uni-icons :type="emptyIcon" size="60" color="#d9d9d9"></uni-icons>
        </view>
        <text class="empty-title">{{ emptyTitle }}</text>
        <text v-if="emptyDescription" class="empty-description">{{ emptyDescription }}</text>
        <button v-if="showRetryButton" class="empty-retry-btn" @click="handleRetry">
          {{ retryButtonText }}
        </button>
      </view>
    </template>

    <!-- 错误状态 -->
    <template v-else-if="type === 'error'">
      <view class="error-container">
        <view class="error-icon">
          <uni-icons type="closeempty" size="60" color="#ff4d4f"></uni-icons>
        </view>
        <text class="error-title">{{ errorTitle }}</text>
        <text v-if="errorDescription" class="error-description">{{ errorDescription }}</text>
        <button class="error-retry-btn" @click="handleRetry">
          {{ retryButtonText }}
        </button>
      </view>
    </template>

    <!-- 网络错误状态 -->
    <template v-else-if="type === 'network'">
      <view class="network-container">
        <view class="network-icon">
          <uni-icons type="wifi" size="60" color="#faad14"></uni-icons>
        </view>
        <text class="network-title">网络连接异常</text>
        <text class="network-description">请检查网络设置后重试</text>
        <button class="network-retry-btn" @click="handleRetry">
          重新加载
        </button>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
interface Props {
  type: 'skeleton' | 'loading' | 'empty' | 'error' | 'network';
  skeletonCount?: number;
  loadingText?: string;
  emptyIcon?: string;
  emptyTitle?: string;
  emptyDescription?: string;
  errorTitle?: string;
  errorDescription?: string;
  showRetryButton?: boolean;
  retryButtonText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  skeletonCount: 3,
  loadingText: '加载中...',
  emptyIcon: 'list',
  emptyTitle: '暂无数据',
  emptyDescription: '',
  errorTitle: '加载失败',
  errorDescription: '请稍后重试',
  showRetryButton: true,
  retryButtonText: '重试',
});

const emit = defineEmits<{
  retry: [];
}>();

const handleRetry = () => {
  emit('retry');
};
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--spacing-xl);
}

// 骨架屏样式
.skeleton-container {
  width: 100%;
  
  .skeleton-item {
    display: flex;
    align-items: flex-start;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--card-background);
    border-radius: var(--border-radius);
    
    .skeleton-avatar {
      width: 40px;
      height: 40px;
      border-radius: var(--border-radius-round);
      margin-right: var(--spacing-md);
      @include loading-skeleton;
    }
    
    .skeleton-content {
      flex: 1;
      
      .skeleton-line {
        height: 12px;
        border-radius: 6px;
        margin-bottom: var(--spacing-sm);
        @include loading-skeleton;
        
        &--title {
          width: 60%;
          height: 16px;
        }
        
        &--subtitle {
          width: 80%;
        }
        
        &--text {
          width: 40%;
          margin-bottom: 0;
        }
      }
    }
  }
}

// 加载中样式
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  
  .loading-spinner {
    display: flex;
    gap: var(--spacing-xs);
    
    .spinner-dot {
      width: 8px;
      height: 8px;
      border-radius: var(--border-radius-round);
      background-color: var(--primary-color);
      animation: bounce 1.4s infinite ease-in-out both;
      
      &:nth-child(1) { animation-delay: -0.32s; }
      &:nth-child(2) { animation-delay: -0.16s; }
      &:nth-child(3) { animation-delay: 0s; }
    }
  }
  
  .loading-text {
    font-size: var(--font-size-md);
    color: var(--text-color-secondary);
  }
}

// 空状态样式
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  
  .empty-icon {
    opacity: 0.6;
  }
  
  .empty-title {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    font-weight: 500;
  }
  
  .empty-description {
    font-size: var(--font-size-md);
    color: var(--text-color-secondary);
    text-align: center;
    line-height: var(--line-height-relaxed);
  }
  
  .empty-retry-btn {
    @include button-secondary;
    margin-top: var(--spacing-md);
  }
}

// 错误状态样式
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  
  .error-icon {
    opacity: 0.8;
  }
  
  .error-title {
    font-size: var(--font-size-lg);
    color: var(--error-color);
    font-weight: 500;
  }
  
  .error-description {
    font-size: var(--font-size-md);
    color: var(--text-color-secondary);
    text-align: center;
    line-height: var(--line-height-relaxed);
  }
  
  .error-retry-btn {
    @include button-primary;
    margin-top: var(--spacing-md);
  }
}

// 网络错误样式
.network-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  
  .network-icon {
    opacity: 0.8;
  }
  
  .network-title {
    font-size: var(--font-size-lg);
    color: var(--warning-color);
    font-weight: 500;
  }
  
  .network-description {
    font-size: var(--font-size-md);
    color: var(--text-color-secondary);
    text-align: center;
    line-height: var(--line-height-relaxed);
  }
  
  .network-retry-btn {
    @include button-primary;
    margin-top: var(--spacing-md);
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
</style>